<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="LayoutIt">
    <title>综合管理平台</title>

    <!-- 核心样式开始 -->
    <link href="css/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/css/jquery-ui.min.css">
    <link rel="stylesheet" href="./css/css/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="./css/css/jquery.datetimepicker.css">

    <link rel="stylesheet" href="./css/base.css">
    <link title="blue" href="css/blue.css" rel="stylesheet">
    <link title="purpleBlue" href="css/purpleBlue.css" rel="stylesheet" disabled="disabled">
    <link title="golden" href="css/golden.css" rel="stylesheet" disabled="disabled">
    <!--核心样式结束-->

    <link rel="stylesheet" href="css/topology.css">

    <!-- Fav and touch fa fas -->
    <link rel="shortcut icon" href="image/favicon.ico">

    <!--核心js文件开始-->
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="js/js/html5shiv.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/js/jquery-2.1.4.min.js"></script>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/js/jquery-1.12.0.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/js/jquery.ui.touch-punch.min.js"></script>
    <script src="./js/js/jquery.cookie.js"></script>
    <script src="./js/js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="./js/js/jquery.datetimepicker.js"></script>
    <script src="./js/common.js"></script>
    <!--核心js文件结束-->

    <script src="js/js/vis.js"></script>
    <script type="text/javascript" src="js/nav.js"></script>
</head>

<body style="cursor: auto; overflow: hidden;" class="edit">
<div class="container-fluid">
    <div class="row-fluid">
        <!-- 菜单栏开始 BEGIN SIDEBAR MENU -->
        <div class="">
            <div class="sidebar-nav">
                <!-- 侧边按钮开始 BEGIN SIDEBAR TOGGLER BUTTON -->
                <div class="clearfix">
                    <div class="sidebar-toggler hidden-phone zoom-out" id="devpreview1"><i
                            class="fa fa-angle-left fa fa-2x"></i></div>
                </div>
                <!-- 侧边按钮结束 BEGIN SIDEBAR TOGGLER BUTTON -->
                <!-- 响应快速搜索表单开始 BEGIN RESPONSIVE QUICK SEARCH FORM -->
                <form class="sidebar-search">
                    <div class="input-box">
                        <a href="javascript:;" class="remove"></a>
                        <input type="text" placeholder="Search..."/>
                        <div class="submit"><i class="fa fa-search"></i></div>
                    </div>
                </form>
                <!-- 响应快速搜索表单结束 END RESPONSIVE QUICK SEARCH FORM -->
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <a href="index.html"><i class="fa fa-home"></i><span class="title">首页</span></a>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <a href="servers.html"><i class="fa fa-sitemap"></i><span class="title">服务器</span></a>
                    </li>
                    <li style="display: none;" class="rows" id="estRows">
                        <div class="lyrow large ui-draggable" index="0">
                            <a href="#close" class="remove label label-important"><i
                                    class="fa fa-remove fa fa-white"></i></a>
                            <span class="drag label">深圳</span>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span12 column">
                                        <div class="viewHead">
                                            <div class="crowd">吞吐量(流入和流出)</div>
                                            <div class="begin">
                                                <input type="text" name="begin" class="dtpicker">
                                            </div>
                                            <div class="end">
                                                <input type="text" name="end" class="dtpicker">
                                            </div>
                                            <div class="lastHour">最近一小时</div>
                                            <div class="submit">
                                                <i class="fa fa-check"></i>
                                                <input type="hidden" name="">
                                                <input type="hidden" name="">
                                            </div>
                                        </div>
                                        <iframe class='model-data' src=""></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lyrow large ui-draggable" index="1">
                            <a href="#close" class="remove label label-important"><i
                                    class="fa fa-remove fa fa-white"></i></a>
                            <span class="drag label">广州</span>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span12 column">
                                        <div class="viewHead">
                                            <div class="crowd">吞吐量(流入和流出)</div>
                                            <div class="begin">
                                                <input type="text" name="begin" class="dtpicker">
                                            </div>
                                            <div class="end">
                                                <input type="text" name="end" class="dtpicker">
                                            </div>
                                            <div class="lastHour">最近一小时</div>
                                            <div class="submit">
                                                <i class="fa fa-check"></i>
                                                <input type="hidden" name="">
                                                <input type="hidden" name="">
                                            </div>
                                        </div>
                                        <iframe class='model-data' src=""></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lyrow large ui-draggable" index='2'>
                            <a href="#close" class="remove label label-important"><i
                                    class="fa fa-remove fa fa-white"></i></a>
                            <span class="drag label">香港</span>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span12 column">
                                        <div class="viewHead">
                                            <div class="crowd">吞吐量(流入和流出)</div>
                                            <div class="begin">
                                                <input type="text" name="begin" class="dtpicker">
                                            </div>
                                            <div class="end">
                                                <input type="text" name="end" class="dtpicker">
                                            </div>
                                            <div class="lastHour">最近一小时</div>
                                            <div class="submit">
                                                <i class="fa fa-check"></i>
                                                <input type="hidden" name="">
                                                <input type="hidden" name="">
                                            </div>
                                        </div>
                                        <iframe class='model-data' src=""></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lyrow large ui-draggable" index="3">
                            <a href="#close" class="remove label label-important"><i
                                    class="fa fa-remove fa fa-white"></i></a>
                            <span class="drag label">澳门</span>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span12 column">
                                        <div class="viewHead">
                                            <div class="crowd">吞吐量(流入和流出)</div>
                                            <div class="begin">
                                                <input type="text" name="begin" class="dtpicker">
                                            </div>
                                            <div class="end">
                                                <input type="text" name="end" class="dtpicker">
                                            </div>
                                            <div class="lastHour">最近一小时</div>
                                            <div class="submit">
                                                <i class="fa fa-check"></i>
                                                <input type="hidden" name="">
                                                <input type="hidden" name="">
                                            </div>
                                        </div>
                                        <iframe class='model-data' src=""></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group bg-color">
                    <li class="nav-header">
                        <a href="topology.html"><i class="fa fa-bar-chart"></i><span class="title">业务拓扑</span></a>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <a href="report.html"><i class="fa fa-list-alt"></i><span class="title">服务质量报告</span></a>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <a href="users.html"><i class="fa fa-users"></i><span class="title">用户设置</span></a>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <i class="fa fa-plus <!--fa fa-white-->"></i>
                        <span class="title">应用扩展</span>
                    </li>
                    <li style="display: none;" class="rows mute" id="elmComm">
                        <div class="preview">建设中...</div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 菜单栏结束 END SIDEBAR MENU -->
        <!-- 视图区域开始 -->
        <div id="content-md">
            <div class="topology-m viewArea">
                <div class="t-m-header  viewArea-h">业务拓扑</div>
                <div class="t-m-content viewArea-c">
                    <div class="draw">
                        <button id="draw" onclick="drawExample('example1')"></button>
                        <button id="draw2" onclick="drawExample('example2')"></button>
                        <button id="draw3" onclick="drawExample('example3')"></button>
                    </div>
                    <div id="mygraph"></div>
                </div>
            </div>
        </div>
        <textarea id="data" style="display: none"></textarea>
        <!-- 视图区域结束 -->
    </div>
</div>

<!--<div class="footer" style="text-align:center;">-->
<!--<p>From:<a href="http://182.92.168.13/" target="_blank">77Element</a></p>-->
<!--</div>-->

<textarea id="example1" class="example">
  digraph {
  node [shape=circle fontSize=16]
  edge [length=100, color=gray, fontColor=black]

  A -> A[label=0.5];
  B -> B[label=1.2] -> C[label=0.7] -- A;
  B -> D;
  D -> {B; C}
  D -> E[label=0.2];
  F -> F;
  A [
  fontColor=white,
  color=red,
  ]
  }
</textarea>

<textarea id="example2" class="example">
  digraph topology
  {
  node[shape=circle fontSize=12]
  edge[length=170 fontSize=12]
  "10.0.255.1" -> "10.0.255.3"[label="1.000"];
  "10.0.255.1" -> "10.0.255.2"[label="1.000"];
  "10.0.255.1" -> "10.0.255.2"[label="1.000"];
  "10.0.255.1" -> "10.0.255.3"[label="1.000"];
  "10.0.255.2" -> "10.0.255.1"[label="1.000"];
  "10.0.255.2" -> "10.0.255.3"[label="1.000"];
  "10.0.255.3" -> "10.0.255.1"[label="1.000"];
  "10.0.255.3" -> "10.0.255.2"[label="1.000"];
  "10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
  "10.0.3.0/24"[shape=box];
  "10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
  "10.0.2.0/24"[shape=box];
  "10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
  "10.0.1.0/24"[shape=box];
  }
</textarea>

<textarea id="example3" class="example">
  digraph G  {
  // note: not all attributes are recognized and supported by Network
  //       unrecognized attributes are ignored

  node[width=.25,height=.375,fontsize=15]
  node [shape=filled fillcolor=#F1AAF0]
  0-> 0 ;
  1-> 1 ;
  2-> 2 ;
  3-> 3 ;
  4-> 4 ;
  5-> 5 ;
  6-> 6 ;
  7-> 5 ;
  8-> 8 ;
  9-> 9 ;
  10-> 10 ;
  11-> 10 ;
  12-> 12 ;
  13-> 5 ;
  14-> 10 ;
  15-> 0 ;
  }
</textarea>
<script>
    var graph, data;

    var txtData = document.getElementById('data');

    // parse and draw the data分析和绘制数据
    function draw() {
        try {
            // Provide a string with data in DOT language提供与DOT语言数据的字符串
            data = {
                dot: txtData.value
            };
            // create a graph
            var container = document.getElementById('mygraph');
            var options = {};
            graph = new vis.Graph(container, data, options);
        }
        catch (err) {
            // set the cursor at the position where the error occurred设置光标在发生错误的位置
            var match = /\(char (.*)\)/.exec(err);
            if (match) {
                var pos = Number(match[1]);
                if (txtData.setSelectionRange) {
                    txtData.focus();
                    txtData.setSelectionRange(pos, pos);
                }
            }
        }
    }
    function drawExample(id) {
        txtData.value = document.getElementById(id).value;
        draw();
    }

    $(function () {
        $(window).resize(function () {
            graph.redraw()
        })
        drawExample('example1');//默认加载图1
    })
</script>

</body>
</html>